<template>
	<div class="dialogZ">
		<el-dialog v-model="dialogVisible" width="800" :before-close="hideModal">
			<el-carousel height="67vh" :loop="false" :autoplay="false" indicator-position="outside" arrow="always" trigger="click" @change="bannerChange">
				<el-carousel-item v-for="item in infoDataList" :key="item">
					<Kuaile8Pic ref="targetRef" :infoData="item"></Kuaile8Pic>
				</el-carousel-item>
			</el-carousel>

			<template #footer>
				<div class="dialog-footer">
					<text
						>共<text style="color: red; font-weight: bold; margin-left: 2px; margin-right: 2px"> {{ infoData.winNoticeDetailsVos.length }} </text
						>项奖项，已分为<text style="color: red; font-weight: bold; margin-left: 2px; margin-right: 2px">{{ infoDataList.length }}</text
						>张图片</text
					>
					<text style="color: red; font-size: 12px"> * 点击图片左右的箭头切换图片 </text>
					<div style="display: flex; margin-top: 10px">
						<el-button type="primary" @click="captureAndDownload('current')"> 生成当前页图片 </el-button>
						<el-button type="danger" @click="captureAndDownload('all')"> 生成全部图片 </el-button>
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';
import Kuaile8Pic from '../component/Kuaile8Pic.vue';

const emit = defineEmits(['handleClose']);

// 引用目标元素
const targetRef = ref(null);

async function captureAndDownload(type) {
	console.log('🚀 ~ targetRef:', targetRef.value);

	if (type == 'current') {
		targetRef.value[bannerIndex.value].captureAndDownload();
	} else {
		for (let item of targetRef.value) {
			await item.captureAndDownload();
		}
	}
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
});

const bannerIndex = ref(0);
function bannerChange(val) {
	bannerIndex.value = val;
}

const infoDataList = ref([]);

const infoData = ref({});
const dialogVisible = ref(false);
async function showModal(item) {
	console.log('🚀 ~ showModal ~ item:', item);
	dialogVisible.value = true;
	if (item) {
		infoData.value = item;

		let arr = splitArrayInto4Parts(item.winNoticeDetailsVos);
		infoDataList.value = arr.map((item) => {
			return {
				...infoData.value,
				winNoticeDetailsVos: item,
			};
		});
	}
}

/**
 * 将数组平均分成4份
 * @param {Array} arr - 要分割的数组
 * @returns {Array} 包含4个子数组的数组
 */
function splitArrayInto4Parts(arr) {
	const result = [];
	const length = arr.length;
	// 计算每份的基础长度和剩余元素
	const baseSize = Math.floor(length / 4);
	const remainder = length % 4;

	let start = 0;

	for (let i = 0; i < 4; i++) {
		// 前remainder份多分配1个元素
		const currentSize = baseSize + (i < remainder ? 1 : 0);
		// 从start开始截取currentSize个元素
		const part = arr.slice(start, start + currentSize);
		result.push(part);
		// 更新下一份的起始索引
		start += currentSize;
	}

	return result;
}

function hideModal() {
	dialogVisible.value = false;
	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss">
.dialogZ {
	:deep(.el-overlay) {
		background-color: rgba(141, 141, 141, 0.7);
		backdrop-filter: saturate(180%) blur(3px);
	}
}

.dialog-footer {
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: -10px;
}
</style>
